<script>

import KtIcon from "/src/components/node-kantboot/components/KtIcon/KtIcon.vue";

export default {
  components: {KtIcon},
  data() {
    return {
      // 系列列表
      seriesList: [],
      dialogShow:false,
      // 请求参数
      requestParam: {
        // 系列编码
        seriesCode: "",
        // 职称等级名称
        name: "",
        // 职称等级数值
        number: "",
        // 职称等级图标
        fileIdOfIcon: "",
      },
      show:false,
      // 已选择的职称列表
      selectedTitleLevels: [],
      // 年份输入
      yearMap:{},
    }
  },
  mounted() {
    this.getSeriesList();
  },
  methods: {
    open(item) {
      let row = JSON.parse(JSON.stringify(item));
      if(row){
        this.selectedTitleLevels= [];
        // this.selectedTitleLevels = row;
        for(let i = 0; i < row.length; i++){
          this.yearMap[row[i].seriesCode] = row[i].workYears;
          let json = {
            id: row[i].titleLevelId,
            seriesCode: row[i].titleLevel.seriesCode,
            series: row[i].series,
            name: row[i].titleLevel.name,
            number: row[i].titleLevel.number,
            fileIdOfIcon: row[i].titleLevel.fileIdOfIcon
          }
          this.selectedTitleLevels.push(json);
          this.$forceUpdate();

        }
      }else{
        this.selectedTitleLevels = [];
      }
      this.show = true;

    },
    close() {
      this.show = false;
    },
    /**
     * 判断是否已选择
     */
    isSelected(item) {
      return this.selectedTitleLevels.find(item1 => item1.id === item.id);
    },
    toSelect(item) {
      if(this.isSelected(item)){
        this.selectedTitleLevels = this.selectedTitleLevels.filter(item1 => item1.id !== item.id);
      }else{
        // this.selectedTitleLevels.push(item);
        // 每个系列只能选择一个职称等级
        let isExist = false;
        for(let i = 0; i < this.seriesList.length; i++) {
          if (this.seriesList[i].code === item.seriesCode) {
            this.selectedTitleLevels = this.selectedTitleLevels.filter(item1 => item1.seriesCode !== item.seriesCode);
            this.selectedTitleLevels.push(item);
            isExist = true;
            break;
          }
        }
        if(!isExist){
          this.selectedTitleLevels.push(item);
        }
      }
    },
    /**
     * 根据系列获取选择的职称等级
     */
    getSelectedTitleLevelBySeriesCode(seriesCode) {
      for(let i = 0; i < this.selectedTitleLevels.length; i++) {
        console.log(this.selectedTitleLevels[i].seriesCode,"--",seriesCode)
        if (this.selectedTitleLevels[i].seriesCode == seriesCode) {
          return this.selectedTitleLevels[i];
        }
      }
      return false;
    },
    /**
     * 获取系列列表
     */
    getSeriesList() {
      let loading = this.$loading({
        lock: true,
        text: "正在加载系列列表",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.$kt.requestSecurity.send({
        uri: "/admin/series/getAll",
        stateSuccess: (res) => {
          this.seriesList = res.data;
          // 将职称等级按照number排倒序
          this.seriesList.forEach(item => {
            item.titleLevels?.sort((a, b) => {
              return b.number - a.number;
            });
          });

          for(let i = 0; i < this.seriesList.length; i++) {
            this.yearMap[this.seriesList[i].code] = "";
          }
          loading.close();
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          loading.close();
        }
      });
    },
    /**
     * 删除职称等级
     * @param item1
     */
    toRemove(item1) {
      this.$confirm("确定删除该职称等级吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$kt.requestSecurity.send({
          uri: "/admin/titleLevel/remove",
          data: {
            id: item1.id
          },
          stateSuccess: (res) => {
            this.getSeriesList();
            this.$message.success("删除成功");
          },
          stateFail: (err) => {
            this.$message.error(err.errMsg);
          }
        });
      }).catch(() => {
      });
    },
    openDialog(requestParam){
      if(requestParam){
        this.requestParam = requestParam;
      }
      this.dialogShow = true;
    },
    toSave(){
      // 不能为空
      if(!this.requestParam.seriesCode){
        this.$message.error("请选择工作系列");
        return;
      }
      if(!this.requestParam.name){
        this.$message.error("请输入职称等级名称");
        return;
      }
      if(!this.requestParam.number){
        this.$message.error("请输入职称等级数值");
        return;
      }
      if(!this.requestParam.fileIdOfIcon){
        this.$message.error("请上传职称等级图标");
        return;
      }


      this.$kt.requestSecurity.send({
        uri: "/admin/titleLevel/save",
        data: this.requestParam,
        stateSuccess: (res) => {
          this.getSeriesList();
          this.dialogShow = false;
          this.$message.success(res.msg);
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
        }
      });
    },
    // 上传图片
    uploadImg() {
      this.$kt.file.chooseImageOne().then(res => {
        let loading = this.$loading({
          lock: true,
          text: '上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$kt.request.uploadFile({
          file: res.file,
          groupCode: "gwLevel",
          stateSuccess: (res) => {
            this.requestParam.fileIdOfIcon = res.data.id;
            loading.close();
          },
          stateFail: (res) => {
            loading.close();
            this.$message.error(res.errMsg);
          }
        });
      });
    },
    toConfirm() {
      // this.$emit("confirm", this.selectedTitleLevels);
      // this.show = false;
      // 检查是否所有系列都选择了职称等级
      let isAllSelected = true;
      for(let i = 0; i < this.seriesList.length; i++) {
        if (!this.getSelectedTitleLevelBySeriesCode(this.seriesList[i].code)) {
          isAllSelected = false;
          break;
        }
      }
      if (!isAllSelected) {
        this.$message.error("请为每个工作系列选择职称等级");
      } else {
        let titleLevels = [];
        for(let i = 0; i < this.selectedTitleLevels.length; i++) {
          let workYears = this.yearMap[this.selectedTitleLevels[i].seriesCode];
          let json = {
            titleLevelId: this.selectedTitleLevels[i].id,
            titleLevel: this.selectedTitleLevels[i],
            seriesCode: this.selectedTitleLevels[i].seriesCode,
            series: this.selectedTitleLevels[i].series,
            workYears: workYears
          }
          console.log(this.selectedTitleLevels[i].series,"--")
          titleLevels.push(json);
        }


        this.$emit("select", titleLevels);
        this.show = false;
      }
    }
  }
}
</script>

<template>
  <el-dialog
  v-model="show"
  style="width: 700px"
  >



  <div class="box">
    <div style="text-align: left">
      <!--  刷新  -->
      <el-button
          @click="getSeriesList">
        <kt-icon
            icon="el-icon-refresh"></kt-icon>
      </el-button>

    </div>
    <el-scrollbar style="height: 400px">

    <div
        v-for="item in seriesList"
        class="in-box"
    >
      <div class="in-box-header">
        <div class="in-box-header-title">
          <span>工作系列：{{ item.name }} #{{ item.code }}</span>
          <!--     添加     -->
          <el-button
              size="small"
              style="float: right"
              @click="openDialog({seriesCode:item.code})"
          >
            <kt-icon icon="el-icon-plus"></kt-icon>
          </el-button>
        </div>
      </div>
      <div
          v-if="show"
          class="in-box-body">
        <el-scrollbar style="height: 220px">

          <div class="card-body-content">
            <el-row>
              <el-col
                  v-for="item1 in item.titleLevels"

                  :span="8">
                <el-popover
                    placement="bottom"
                    :title="item1.name"
                    :width="200"
                    trigger="hover"
                >
                  <template #reference>
                    <div
                        :style="isSelected(item1) ? 'opacity: 1' : 'opacity: .5'"
                        @click="toSelect({
                        series: item,
                        ...item1
                        })"
                        class="card-body-content-item">
                      <div>
                        <img class="card-body-content-item-img"
                             :src="$kt.file.visit(item1.fileIdOfIcon)"/>
                      </div>
                      <div class="card-body-content-item-title">{{ item1.name }}</div>
                    </div>
                  </template>
                  <template #default>
                    <div>
                      <div style="font-size: 12px">
                        <div>职称等级：{{ item1.name }}</div>
                        <div style="height: 5px"></div>
                        <div>对应工作系列：{{ item.name }} #{{ item.code }}</div>
                      </div>
                      <div style="height: 10px"></div>
                      <div style="text-align: right">
                        <!--        编辑            -->
                        <el-button
                            size="small"
                            type="primary"
                            @click="openDialog(item1)"
                            style="margin-right: 5px">
                          <kt-icon icon="el-icon-edit"></kt-icon>
                        </el-button>
                        <!--        删除            -->
                        <el-button
                            size="small"
                            @click="toRemove(item1)"
                            type="danger">
                          <kt-icon
                              color="#fff"
                              icon="el-icon-delete"></kt-icon>
                        </el-button>
                      </div>
                    </div>
                  </template>
                </el-popover>
              </el-col>
            </el-row>
          </div>

        </el-scrollbar>

<!--    选择的    -->
        <div style="text-align: center">
          <div
          v-if="!getSelectedTitleLevelBySeriesCode(item.code)"
          >未选择职称等级</div>
          <div
          v-else
          >已选择：<span style="font-weight: bold">{{ getSelectedTitleLevelBySeriesCode(item.code).name }}</span></div>
        </div>

        <el-input
            v-if="getSelectedTitleLevelBySeriesCode(item.code)"
            v-model="yearMap[item.code]"
            placeholder="年限（非必填）"
            style="margin-top: 10px">
          <template #prepend>
            年限
          </template>
        </el-input>

      </div>
    </div>
    </el-scrollbar>

  </div>

    <el-dialog
      v-model="dialogShow">

    <el-form
        label-position="top">
      <el-form-item
          label="系列">
        <el-select
            v-model="requestParam.seriesCode"
            placeholder="请选择系列">
          <el-option
              v-for="item in seriesList"
              :key="item.code"
              :label="item.name + ' #' + item.code"
              :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
          label="职称等级名称">
        <el-input
            v-model="requestParam.name"
            placeholder="请输入职称等级名称">
        </el-input>
      </el-form-item>
      <el-form-item
          label="职称等级数值">
        <el-input
            v-model="requestParam.number"
            placeholder="请输入职称等级数值">
        </el-input>
        <div style="font-size: 12px;opacity: .5">数值越大，则代表等级越高</div>
      </el-form-item>
      <el-form-item
          label="职称等级图标">
        <div class="icon-box">
          <el-image
              :preview-src-list="[$kt.file.visit(requestParam.fileIdOfIcon)]"
              v-if="requestParam.fileIdOfIcon"
              class="icon-img"
              :src="$kt.file.visit(requestParam.fileIdOfIcon)" />
          <div
              @click="uploadImg"
              class="icon-edit">更改/添加</div>
        </div>
      </el-form-item>
      <el-form-item>
        <div style="text-align:right;width: 100%">
          <el-button
              type="primary"
              @click="toSave">保存</el-button>
        </div>
      </el-form-item>
    </el-form>

  </el-dialog>
    <el-divider></el-divider>
    <div style="text-align: right">
      <el-button
          @click="toConfirm"
          type="primary">确定</el-button>
    </div>
  </el-dialog>

</template>

<style lang="scss" scoped>

.box {
  box-sizing: border-box;
  text-align: center;
}

.card {
  text-align: left;
  background-color: #FFFFFF;
  padding: 10px;
  display: inline-block;
  margin: 10px;
  box-sizing: border-box;
  width: 300px;
  border-radius: 10px;
  border: 1px solid #e8e8e8;

  .in-box-header {
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #e8e8e8;

    .in-box-header-title {
      font-size: 14px;
      font-weight: bold;
    }
  }

  .in-box-body {

    padding: 10px;
    box-sizing: border-box;

    .card-body-content {

      .card-body-content-item {
        display: inline-block;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
        cursor: pointer;

        .card-body-content-item-img {
          width: 50px;
          height: 50px;
          border-radius: 10px;
        }

        .card-body-content-item-title {
          font-size: 14px;
          color: #000000;
          font-weight: bold;
        }
      }

      .card-body-content-item:hover {
        transform: scale(.95);
      }
    }
  }
}

.icon-box {
  width: 100px;
  height: 100px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  display: inline-block;
  position: relative;

  .icon-img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }

  .icon-edit{
    position: absolute;
    width:100%;
    text-align: center;
    bottom: 0;
    background-color: rgba(0,0,0,.8);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    border-radius: 0 0 10px 10px;
  }

  .icon-edit:hover{
    background-color: rgba(0,0,0,.5);
  }

  .icon-edit:active{
    background-color: rgba(0,0,0,.3);
  }
}

</style>